<template>
  <div class="body">
    <div class="logo_panel">
      <div class="icon">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="ionicon"
          viewBox="0 0 512 512"
        >
          <path
            d="M480 173.59c0-104.13-68.26-134.65-68.26-134.65C377.3 23.15 318.2 16.5 256.8 16h-1.51c-61.4.5-120.46 7.15-154.88 22.94 0 0-68.27 30.52-68.27 134.65 0 23.85-.46 52.35.29 82.59C34.91 358 51.11 458.37 145.32 483.29c43.43 11.49 80.73 13.89 110.76 12.24 54.47-3 85-19.42 85-19.42l-1.79-39.5s-38.93 12.27-82.64 10.77c-43.31-1.48-89-4.67-96-57.81a108.44 108.44 0 01-1-14.9 558.91 558.91 0 0096.39 12.85c32.95 1.51 63.84-1.93 95.22-5.67 60.18-7.18 112.58-44.24 119.16-78.09 10.42-53.34 9.58-130.17 9.58-130.17zm-80.54 134.16h-50V185.38c0-25.8-10.86-38.89-32.58-38.89-24 0-36.06 15.53-36.06 46.24v67h-49.66v-67c0-30.71-12-46.24-36.06-46.24-21.72 0-32.58 13.09-32.58 38.89v122.37h-50V181.67q0-38.65 19.75-61.39c13.6-15.15 31.4-22.92 53.51-22.92 25.58 0 44.95 9.82 57.75 29.48L256 147.69l12.45-20.85c12.81-19.66 32.17-29.48 57.75-29.48 22.11 0 39.91 7.77 53.51 22.92q19.79 22.72 19.75 61.39z"
          />
        </svg>
      </div>
    </div>
    <div class="login_panel">
      <el-form :model="User" ref="User">
        <el-form-item prop="user_loginname" :rules="input_rules">
          <el-input
            v-model="User.user_loginname"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="user_loginpass" :rules="input_rules">
          <el-input
            v-model="User.user_loginpass"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="validateLogin('User')">登 录</el-button>
          <el-button class="reg" @click="goReg()">注 册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: "LoginView",
  data() {
    return {
      User: {
        user_loginname: "",
        user_loginpass: "",
      },
      input_rules: [{ required: true, message: "请输入", trigger: "blur" }],
    };
  },
  methods: {
    validateLogin(formName) {
      //先验证输入
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.login();
          ///console.log('submit!!');
        } else {
          ///console.log('error submit!!');
          return false;
        }
      });
    },
    async login() {
      var res = await this.$http.post("loginUser", this.User);
      if (res.state == 200) {
        this.$store.commit("login", JSON.stringify(res.data.user));
        this.$store.commit("settoken", res.data.token);
        // console.log(res.data);
        this.$router.push("/");
      } else {
        this.$router.push("/login");
      }
    },
    goReg() {
      this.$router.push("/regView");
    },
  },
};
</script>
<style scoped>
body {
  background-color: #1678ff;
}

.body {
  background-color: #1678ff;
  height: 100vh;
}

.logo_panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 0;
}

.logo_panel .icon svg {
  width: 120px;
  height: 120px;
  fill: #ffffff;
}

/* 登录窗口 */
.login_panel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login_panel .el-input {
  outline: none;
  height: 40px;
  width: 250px;
  font-size: 18px;
  color: #000000;
  border-radius: 4px;
}

.login-btn {
  padding: 20px 0;
}

.el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}

.mybtn {
  width: 120px;
}

.reg {
  margin-left: 20px;
}

.el-button {
  width: 98px;
}
.el-form-item {
  text-align: center;
}
</style>